<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <style>
            .box1 {
                width: 200px;
                height: 200px;
                background-color: #bfa;
                font-size: 100px;
            }

            .box2 {
                width: 200px;
                height: 200px;
                background-color: orange;
                font-size: 100px;
                /* 
                  绝对定位:
                      - 当元素的position属性值设置为absolute时,则开启了绝对定位
                      - 绝对定位的特点:
                          1.开启绝对定位后,如果不设置偏移量元素的位置不会发生变化。
                          2.开启绝对定位后,元素会从文档流中脱离
                          3.绝对定位会改变元素的性质,行内变成块,块的宽高被内容撑开
                          4.绝对定位会使元素提高一个层级。
                          5.绝对定位元素是相对于其包含块进行定位

                          包含块(containg block)
                            - 正常情况下:
                                包含块就是离当前元素最近的祖先块元素
                                <div>
                                  <div>
                                    <span>
                                      <em></em>  
                                    </span>  
                                  </div>  
                                </div>
                            - 绝对定位的包含块:
                                包含块就是离它最近的开启了定位(只要position的值不是static,就是开启了定位)的祖先元素
                                  如果所有的祖先元素都没开启定位则相对于根元素(根元素就是开启绝对定位元素的包含块)进行定位
                          
                            - html(根元素,初试包含块)
                                
                */

                position: absolute;
                left: 0;
                top: 0;
            }

            .box3 {
                width: 200px;
                height: 200px;
                background-color: yellow;
                font-size: 100px;
            }

            .box4 {
                width: 400px;
                height: 400px;
                background-color: tomato;
                position: relative;
            }

            .box5 {
                width: 300px;
                height: 300px;
                background-color: aliceblue;
                position: relative;
            }
        </style>
        <title>Document</title>
    </head>
    <body>
        <div class="box1">1</div>

        <div class="box4">
            4
            <div class="box5">
                5
                <div class="box2">2</div>
            </div>
        </div>
        <div class="box3">3</div>
    </body>
</html>
